// 左右Tab栏切换  点击加高亮
const user = document.querySelector('.user')
const sections = document.querySelectorAll('.article')
user.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    // 让高亮的a取消高亮
    document.querySelector('a.active').classList.remove('active')
    // 当前点击的a增加高亮
    e.target.classList.add('active')

    // 把显示出来的div隐藏起来
    document.querySelector('.article.show').classList.remove('show')
    // 这个a标签对应的那个div显示出来
    sections[+e.target.dataset.index].classList.add('show')
  }
  // document.querySelector(".view_prot").style.display="none"
})
// 将倒计时的效果显示在界面中
let duration = 1800
setInterval(function () {
  const downTime = document.querySelector('.b')
  duration--
  let m = parseInt(duration % 3600 / 60)
  m = m < 10 ? '0' + m : m
  let s = parseInt(duration % 60)
  s = s < 10 ? '0' + s : s
  downTime.innerHTML = `付款倒计时${m}分${s}秒`
  if (m === '0' && s === '0') {
    downTime.innerHTML = `删除`
  }
}, 1000)

// 个人中心轮播图
const prev = document.querySelector('.prev')
const next = document.querySelector('.next')
const ul = document.querySelector('.xtx-carousel ul')
const dian = document.querySelector('.xtx-carousel .dian')

for (let i = 0; i < ul.children.length; i++) {
  const newLi = document.createElement('span')
  newLi.dataset.index = i
  dian.appendChild(newLi)
}
dian.children[0].classList.add('green')

let num = 0
let circle = 0
let flag = true
next.addEventListener('click', function () {
  if (flag) {
    ul.style.transition = 'all 1s'
    num++
    circle++
    if (num > ul.children.length - 1) {
      num = 0
    }
    if (circle > dian.children.length - 1) {
      circle = 0
    }
    console.log();
    updateCircle()
    document.querySelector('.carousel-item.fade').classList.remove('fade')
    ul.children[num].classList.add('fade')
    flag = false
    setTimeout(function () {
      flag = true
    }, 1000)
  }
})
prev.addEventListener('click', function () {
  if (flag) {
    ul.style.transition = 'all 1s'
    num--
    circle--
    if (num < 0) {
      num = ul.children.length - 1
    }
    if (circle < 0) {
      circle = dian.children.length - 1
    }
    updateCircle()
    document.querySelector('.carousel-item.fade').classList.remove('fade')
    ul.children[num].classList.add('fade')
    flag = false
    setTimeout(function () {
      flag = true
    }, 1000)
  }
})

dian.addEventListener('click', function (e) {
  if (e.target.tagName === 'SPAN') {
    circle = +e.target.dataset.index
    num = circle
    updateCircle()
    document.querySelector('.carousel-item.fade').classList.remove('fade')
    ul.children[num].classList.add('fade')
  }
})

function updateCircle() {
  document.querySelector('.dian>span.green').classList.remove('green')
  dian.children[circle].classList.add('green')
}

let timeId = setInterval(function () {
  next.click()
}, 1000)

// 右侧tab栏点击切换
const orderTab = document.querySelector('.order-tab')
const orderList = document.querySelectorAll('.order-list')
orderTab.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    // 让高亮的a取消高亮
    document.querySelector('a.tab').classList.remove('tab')
    // 当前点击的a增加高亮
    e.target.classList.add('tab')
    document.querySelector('.order-list.fade').classList.remove('fade')
    // 这个a标签对应的那个div显示出来
    orderList[e.target.dataset.index].classList.add('fade')
  }
})
// 立即付款的点击跳转
const button = document.querySelector('.order-list')
button.addEventListener('click', function (e) {
  if (e.target.tagName === 'BUTTON') {
    location.href = "../html/pay.html"
  }
})


// 分页的跳转
const pagination = document.querySelector('.order-pagination')
const aALL = document.querySelectorAll('.order-pagination>a')
let xia = 1
pagination.addEventListener('click', function (e) {
  if (e.target.dataset.index) {
    document.querySelector('a.ye').classList.remove('ye')
    e.target.classList.add('ye')
    document.querySelector('.order-list.fade').classList.remove('fade')
    // 这个a标签对应的那个div显示出来
    orderList[e.target.dataset.index].classList.add('fade')
  }

  if (e.target.className === 'buttom') {
    document.querySelector('.order-pagination>a.ye').classList.remove('ye')
    xia++
    if (xia > aALL.length - 2) {
      xia = 1
    }
    console.log(xia);
    aALL[xia].classList.add('ye')
    document.querySelector('.order-list.fade').classList.remove('fade')
    // 这个a标签对应的那个div显示出来
    orderList[xia + 1].classList.add('fade')
  }
  if (e.target.className === 'top') {
    // 让高亮的a取消高亮
    document.querySelector('.order-pagination>a.ye').classList.remove('ye')
    // 当前点击的a增加高亮
    xia--
    if (xia < 1) {
      xia = 1
    }
    console.log(xia);
    aALL[xia].classList.add('ye')
    document.querySelector('.order-list.fade').classList.remove('fade')
    // 这个a标签对应的那个div显示出来
    orderList[xia].classList.add('fade')
  }
})

// 删除订单的弹框
const cancel = document.querySelector('.order-list')
const orderItem = document.querySelectorAll('.order-item')
const dialog = document.querySelector('.dialog')
const xtxDialog = document.querySelector('.xtx-dialog')
// 出现弹框
cancel.addEventListener('click', function (e) {
  if (e.target.className === 'cancel') {
    dialog.classList.toggle('fade')
    xtxDialog.classList.toggle('fade')
    let shan = +e.target.dataset.index
    const greens = document.querySelector('.greens')
    greens.addEventListener('click', function (e) {
      dialog.classList.toggle('fade')
      xtxDialog.classList.toggle('fade')
      orderItem[shan].style.display = 'none'
    })
  }
})
// 点x删除弹框
const dialogHead = document.querySelector('.dialog-head')
dialogHead.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    dialog.classList.toggle('fade')
    xtxDialog.classList.toggle('fade')
  }
})
// 点击选项
const btn = document.querySelector('.btn')
btn.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    document.querySelector('.btn a.active').classList.remove('active')
    e.target.classList.add('active')
  }
})
// 点取消
const grey = document.querySelector('.grey')
grey.addEventListener('click', function () {
  dialog.classList.toggle('fade')
  xtxDialog.classList.toggle('fade')
})
// 点删除按钮
const dialogT = document.querySelector('.dialogT')
const Delete = document.querySelector('.delete')
cancel.addEventListener('click', function (e) {
  if (e.target.className === 'd') {
    dialogT.classList.toggle('fade')
    Delete.classList.toggle('fade')
    let shan = +e.target.dataset.index
    const greenT = document.querySelector('.greenT')
    greenT.addEventListener('click', function (e) {
      dialogT.classList.toggle('fade')
      Delete.classList.toggle('fade')
      orderItem[shan].style.display = 'none'
    })
  }
})
Delete.addEventListener('click', function (e) {
  if (e.target.className === 'del') {
    dialogT.classList.toggle('fade')
    Delete.classList.toggle('fade')
  }
  if (e.target.className === 'greyT') {
    dialogT.classList.toggle('fade')
    Delete.classList.toggle('fade')
  }

})


// 数据渲染
const mes = localStorage.getItem("mes")
const newArr = JSON.parse(mes)

const centerArr = []
centerArr.push(...newArr)
const newCenter=centerArr.filter(e=>e.checked===true)
newCenter.forEach(e => {
  document.querySelector('.render .name').innerHTML = `${e.goodsName}`
  document.querySelector('.render img').src = `${e.goodsPicture}`
  document.querySelector('.render .attr').innerHTML = `${e.titleFir}`
  document.querySelector('.render .price').innerHTML = `¥${e.goodsPrice}`
  document.querySelector('.render .count').innerHTML = `${e.goodsCount}`
  document.querySelector('.z').innerHTML = `¥${e.goodsPrice * e.goodsCount + 6}`
})

document.querySelector(".look").addEventListener("click", function () {
  document.querySelectorAll(".article")[1].classList.remove("show")
  document.querySelector(".view_prot").classList.add('show')
})


const payBtn = document.querySelector('.btn_primary')
payBtn.addEventListener('click', function () {
  location.href = '../html/pay.html'
})
shoppingsss(goodArr)

let username = localStorage.getItem("uname")

const li1 = document.querySelector(".xtx_navs li:nth-child(1)")
const li2 = document.querySelector(".xtx_navs li:nth-child(2)")
if (username) {
    li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${username}</i></a>`
    li2.innerHTML = '<a href="javascript:;">退出登录</a>'
} else {
    li1.innerHTML = '<a href="../html/login.html">请先登录</a>'
    li2.innerHTML = '<a href="../html/register.html">免费注册</a>'
}
// 退出登录
li2.addEventListener("click", function () {
    // 退出登录
    //  删除localStroage的uuu的数据
    localStorage.removeItem("uname")
    location.reload(true)
})